<div class="list-rule">
    <clr-datagrid
        #datagrid
        (clrDgRefresh)="clrLoad($event)"
        [clrDgLoading]="loading"
        [(clrDgSingleSelected)]="selectedRow"
        (clrDgSingleSelectedChange)="selectRule($event)">
        <clr-dg-action-bar>
            <button
                type="button"
                id="new_replication_rule_id"
                class="btn btn-secondary"
                *ngIf="hasCreateReplicationPermission"
                (click)="openModal()">
                <clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{
                    'REPLICATION.NEW_REPLICATION_RULE' | translate
                }}
            </button>
            <button
                type="button"
                id="replication_exe_id"
                class="btn btn-secondary"
                *ngIf="hasExecuteReplicationPermission"
                [disabled]="!selectedRow || !selectedRow.enabled"
                (click)="replicateRule(selectedRow)">
                <clr-icon shape="export" size="16"></clr-icon>&nbsp;{{
                    'REPLICATION.REPLICATE' | translate
                }}
            </button>
            <clr-dropdown
                [clrCloseMenuOnItemClick]="false"
                class="btn btn-link"
                clrDropdownTrigger>
                <span id="rule-action"
                    >{{ 'BUTTON.ACTIONS' | translate
                    }}<clr-icon shape="caret down"></clr-icon
                ></span>
                <clr-dropdown-menu *clrIfOpen>
                    <clr-dropdown>
                        <button
                            type="button"
                            class="btn btn-secondary"
                            (click)="editRule(selectedRow)"
                            [disabled]="!selectedRow">
                            <clr-icon shape="edit" size="16"></clr-icon>&nbsp;
                            <span id="edit_replication_rule_id">{{
                                'BUTTON.EDIT' | translate
                            }}</span>
                        </button>
                        <button
                            *ngIf="selectedRow && !selectedRow.enabled"
                            type="button"
                            class="btn btn-secondary"
                            (click)="operateRule('enable', selectedRow)"
                            [disabled]="!(selectedRow && !selectedRow.enabled)">
                            <clr-icon
                                size="16"
                                shape="success-standard"></clr-icon
                            >&nbsp;
                            <span id="rule-enable">{{
                                'WEBHOOK.ENABLED_BUTTON' | translate
                            }}</span>
                        </button>
                        <button
                            *ngIf="
                                !selectedRow ||
                                (selectedRow && selectedRow.enabled)
                            "
                            type="button"
                            class="btn btn-secondary"
                            (click)="operateRule('disable', selectedRow)"
                            [disabled]="!(selectedRow && selectedRow.enabled)">
                            <clr-icon size="16" shape="ban"></clr-icon>&nbsp;
                            <span id="rule-disable">{{
                                'WEBHOOK.DISABLED_BUTTON' | translate
                            }}</span>
                        </button>
                        <div class="dropdown-divider"></div>
                        <button
                            type="button"
                            class="btn btn-secondary"
                            (click)="deleteRule(selectedRow)"
                            [disabled]="!selectedRow">
                            <clr-icon shape="window-close" size="16"></clr-icon
                            >&nbsp;
                            <span id="delete_replication_rule_id">{{
                                'BUTTON.DELETE' | translate
                            }}</span>
                        </button>
                    </clr-dropdown>
                </clr-dropdown-menu>
            </clr-dropdown>
        </clr-dg-action-bar>
        <clr-dg-column>
            <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[0] }">
                {{ 'REPLICATION.NAME' | translate }}
            </ng-template>
        </clr-dg-column>
        <clr-dg-column class="status-width">
            <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[1] }">
                {{ 'REPLICATION.STATUS' | translate }}
            </ng-template>
        </clr-dg-column>
        <clr-dg-column class="col-width">
            <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[2] }">
                {{ 'REPLICATION.SRC_REGISTRY' | translate }}
            </ng-template>
        </clr-dg-column>
        <clr-dg-column class="col-width">
            <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[3] }">
                {{ 'REPLICATION.REPLICATION_MODE' | translate }}
            </ng-template>
        </clr-dg-column>
        <clr-dg-column class="min-width">
            <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[4] }">
                {{ 'REPLICATION.DESTINATION_NAMESPACE' | translate }}
            </ng-template>
        </clr-dg-column>
        <clr-dg-column>
            <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[5] }">
                {{ 'REPLICATION.DES_REPO_FLATTENING' | translate }}
            </ng-template>
        </clr-dg-column>
        <clr-dg-column [clrDgSortBy]="'speed'">
            <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[6] }">
                {{ 'REPLICATION.BANDWIDTH' | translate }}
            </ng-template>
        </clr-dg-column>
        <clr-dg-column [clrDgField]="'description'">
            <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[7] }">
                {{ 'REPLICATION.DESCRIPTION' | translate }}
            </ng-template>
        </clr-dg-column>
        <clr-dg-column>
            <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[8] }">
                {{ 'REPLICATION.REPLICATION_TRIGGER' | translate }}
            </ng-template>
        </clr-dg-column>
        <clr-dg-placeholder>{{
            'REPLICATION.PLACEHOLDER' | translate
        }}</clr-dg-placeholder>
        <clr-dg-row *ngFor="let p of rules; let i = index" [clrDgItem]="p">
            <clr-dg-cell>{{ p.name }}</clr-dg-cell>
            <clr-dg-cell class="status-width">
                <div>
                    <div *ngIf="!p?.enabled">
                        <clr-icon
                            shape="exclamation-triangle"
                            class="is-warning text-alignment"
                            size="18"></clr-icon>
                        {{ 'WEBHOOK.DISABLED' | translate }}
                    </div>
                    <div *ngIf="p?.enabled">
                        <clr-icon
                            shape="success-standard"
                            class="is-success text-alignment"
                            size="18"></clr-icon>
                        {{ 'WEBHOOK.ENABLED' | translate }}
                    </div>
                </div>
            </clr-dg-cell>
            <clr-dg-cell class="col-width">
                <span class="margin-right-2px">{{
                    p.src_registry ? p.src_registry.name : ''
                }}</span>
            </clr-dg-cell>
            <clr-dg-cell class="col-width">
                {{
                    p.src_registry && p.src_registry.id > 0
                        ? 'pull-based'
                        : 'push-based'
                }}
            </clr-dg-cell>
            <clr-dg-cell class="min-width">
                {{ p.dest_registry ? p.dest_registry.name : '' }} :
                {{ p.dest_namespace ? p.dest_namespace : '-' }}
            </clr-dg-cell>
            <clr-dg-cell>{{
                getFlattenLevelString(p.dest_namespace_replace_count)
                    | translate
            }}</clr-dg-cell>
            <clr-dg-cell class="trigger">
                {{ getTriggerTypeI18n(p.trigger) | translate }}
                <clr-signpost *ngIf="p?.trigger?.trigger_settings?.cron">
                    <clr-signpost-content *clrIfOpen>
                        {{ p?.trigger?.trigger_settings?.cron }}
                    </clr-signpost-content>
                </clr-signpost>
            </clr-dg-cell>
            <clr-dg-cell>{{
                getBandwidthStr(p.speed) | translate
            }}</clr-dg-cell>
            <clr-dg-cell>
                {{ p.description ? trancatedDescription(p.description) : '-' }}
                <clr-tooltip>
                    <clr-icon
                        *ngIf="p.description && p.description.length > 35"
                        clrTooltipTrigger
                        shape="ellipsis-horizontal"
                        size="18"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="bottom-right"
                        clrSize="md"
                        *clrIfOpen>
                        <span>{{ p.description }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </clr-dg-cell>
        </clr-dg-row>
        <clr-dg-footer>
            <clr-dg-pagination
                #pagination
                [(clrDgPage)]="page"
                [clrDgPageSize]="pageSize"
                [clrDgTotalItems]="totalCount">
                <clr-dg-page-size [clrPageSizeOptions]="[5, 15, 30]">{{
                    'PAGINATION.PAGE_SIZE' | translate
                }}</clr-dg-page-size>
                <span *ngIf="totalCount"
                    >{{ pagination.firstItem + 1 }} -
                    {{ pagination.lastItem + 1 }}
                    {{ 'REPLICATION.OF' | translate }} </span
                >{{ totalCount }} {{ 'REPLICATION.ITEMS' | translate }}
            </clr-dg-pagination>
        </clr-dg-footer>
    </clr-datagrid>
    <confirmation-dialog
        #deletionConfirmDialog
        (confirmAction)="deletionConfirm($event)"></confirmation-dialog>
</div>
